﻿<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>排故返件看板</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="Shortcut Icon" href="../images/tempoBI.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../StaticFiles/layui/dist/css/layui.css" />
  <link rel="stylesheet" href="../StaticFiles/layui/admin.css" />
  <link rel="stylesheet" href="../styles/pace.css" />
  <script type="text/javascript" src="../Scripts/pace.min.js"></script>
  <script type="text/javascript" src="../Scripts/json2.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="../Scripts/crypto-js.min.js"></script>
  <style type="text/css">
    html {
      background-image: url(../images/bg.jpg);
      background-repeat: repeat-y;
    }

    #header {
      height: 60px;
      background-image: url(../images/抬头.png);
      background-size: 100% 60px;
      background-repeat: no-repeat;
      color: #fff;
      font-weight: bold;
      text-align: center;
      font-size: 28px;
      line-height: 60px;
    }

    #title {
      color: #fff;
      font-family: '微软雅黑';
      font-size: 20px;
      font-weight: bold;
      height: 32px;
      line-height: 32px;
    }

    .layui-card {
      background-color: transparent;
      border: 1px dashed #1E9FFF;
    }

    .layui-card-header {
      color: #fff;
      border: none;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0.1em;
    }

    /*左上图片*/
    .bg-left-top {
      position: absolute;
      left: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-top.png);
    }

    /*左下图片*/
    .bg-left-bottom {
      position: absolute;
      left: -2px;
      bottom: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-bottom.png);
    }

    /*右上图片*/
    .bg-right-top {
      position: absolute;
      right: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-top.png);
    }

    /*右下图片*/
    .bg-right-bottom {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-bottom.png);
    }

    .layui-table-cell {
      text-align: center;
      color: #fff;
    }

    .layui-table {
      background-color: transparent !important;
    }

    .layui-table-view {
      margin-top: 0px;
    }

    .layui-table-header {
      background-color: transparent !important;
    }

    .layui-table-header .layui-table-cell {
      color: rgb(60, 176, 255);
      font-size: 16px;
      font-family: '微软雅黑';
      font-weight: bold;
    }

    .layui-table tr:hover {
      background-color: transparent !important;
    }

    .layui-table thead tr {
      background-color: transparent !important;
    }

    .layui-laypage a,
    .layui-laypage span {
      color: #fff;
    }

    .layui-laypage .layui-laypage-skip {
      color: #fff;
    }

    .content {
      font-size: 20px;
      font-weight: bold;
      height: 300px;
      line-height: 300px;
      text-align: center;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="layui-row" style="padding: 0 15px;">
    <div class="layui-col-md12">
      <div id="header">
        排故返件
      </div>
    </div>
  </div>
  <div class="layui-row" style="padding: 0 15px;">
    <div class="layui-col-md12">
      <h2 id="title">
      </h2>
    </div>
  </div>
  <div class="layui-fluid" style="padding-bottom: 0px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/本月.png" height="26" alt="" />
            本月返件数据统计
          </div>
          <div class="layui-card-body">
            <div id="fanjianBar" style="height: 300px;">
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md3">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/分布.png" height="26" alt="" />
            本月各机型返件
          </div>
          <div class="layui-card-body">
            <div id="wanchengqingkuangGauge" style="height: 300px; text-align: center;">
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
      <div class="layui-col-md5">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/本月.png" height="26" alt="" />
            本月返件情况
          </div>
          <div class="layui-card-body">
            <div id="factoryFanJianWanBar" style="height: 300px;">
            </div>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-fluid" style="padding-bottom: 0px;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="bg-left-top">
            </div>
            <div class="bg-right-top">
            </div>
            <img src="../images/问题总数.png" height="30" alt="" />
            本月返件明细
          </div>
          <div class="layui-card-body">
            <table id='test'>
            </table>
            <div class="bg-left-bottom">
            </div>
            <div class="bg-right-bottom">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
  <script type="text/javascript" src="../StaticFiles/layui/dist/layui.js"></script>
  <script type="text/javascript">
    $(function () {

      $(".layui-card:last-child").css({ "marginBottom": "0px" });
      function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
      };
      var $factoryid = getUrlParam('factoryid');

      //解密方法
      function Decrypt(source) {
        var key = CryptoJS.enc.Utf8.parse("12345678900000001234567890000000"); //32位
        var iv = CryptoJS.enc.Utf8.parse("1234567890000000"); //16位
        var encryptedHexStr = CryptoJS.enc.Hex.parse(source);
        var srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
        var decrypt = CryptoJS.AES.decrypt(srcs, key, {
          iv: iv,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7
        });
        var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
        return decryptedStr.toString();
      }


      $("#title").text('D交付 | ' + Decrypt(layui.url().search.workcenter) + '返件排故情况');

      layui.use(['layer', 'table'], function () {
        var table = layui.table;
        var layer = layui.layer;

        //本月返件数据统计--柱状图
        function GetZSThisMonthDealFaultBillCount() {
          $.ajax({
            type: "POST",
            url: "../handler/board/ZSWorkcenterDealFaultBill.ashx?type=GetZSThisMonthDealFaultBillCount",
            dataType: "text",
            cashe: false,
            data: {
              workcentername: Decrypt(layui.url().search.workcenter)
            },
            beforeSend: function () {
              echarts.dispose(document.getElementById("fanjianBar"));
              var fanjianBar = echarts.init(document.getElementById('fanjianBar'));
              fanjianBar.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });
            },
            success: function (data) {
              var obj = JSON.parse(data);

              var arrTotal = [], arrFanChuQty = [], arrFinishedQty = [], arrYuChaoQiQty = [], arrChaoQiQty = [];

              for (var i = 0; i < obj.length; i++) {
                arrTotal.push(obj[i]["total"]);
                arrFanChuQty.push(obj[i]["fanChuQty"]);
                arrFinishedQty.push(obj[i]["finishedQty"]);
                arrYuChaoQiQty.push(obj[i]["yuChaoQiQty"]);
                arrChaoQiQty.push(obj[i]["chaoQiQty"]);
              };

              echarts.dispose(document.getElementById("fanjianBar"));
              var chart = echarts.init(document.getElementById('fanjianBar'));
              chart.hideLoading();

              var option = {
                tooltip: {
                  trigger: 'axis',
                  show: true,
                  axisPointer: {
                    type: 'shadow'
                  }
                },
                grid: {
                  left: '1%',
                  right: '1%',
                  bottom: '10%',
                  containLabel: true
                },
                legend: {
                  data: ['总数', '已转出', '已完成', '预超期', '超期'],
                  x: 'center',
                  y: '280',
                  textStyle: {
                    fontSize: '12',
                    fontWeight: 'bold',
                    color: '#fff'
                  }
                },
                color: ['#00BFFF', '#FFF', '#00ff00', 'yellow', 'red'],
                xAxis: [
                  {
                    type: 'category',
                    data: [],
                    axisTick: {
                      alignWithLabel: true
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#fff',
                        width: '2'
                      }
                    },
                    axisLabel: {
                      show: true,
                      textStyle: {
                        color: '#fff',
                        fontSize: '12',
                        fontWeight: 'bold'
                      }
                    }
                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                    axisLine: {
                      lineStyle: {
                        color: '#fff',
                        width: '2'
                      }
                    },
                    axisLabel: {
                      show: true,

                      textStyle: {
                        color: '#fff',
                        fontSize: '12',
                        fontWeight: 'bold'
                      }
                    },
                    splitLine: {
                      show: false,
                      lineStyle: {
                        color: '#999',
                        type: 'dashed'
                      }
                    }
                  }
                ],
                series: [
                  {
                    name: '总数',
                    type: 'bar',
                    barMaxWidth: 35,
                    data: arrTotal,
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          position: 'top',
                          fontSize: '12',
                          fontWeight: 'bold'
                        }
                      }
                    }
                  },
                  {
                    name: '已转出',
                    type: 'bar',
                    barMaxWidth: 35,
                    data: arrFanChuQty,
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          position: 'top',
                          fontSize: '12',
                          fontWeight: 'bold'
                        }
                      }
                    }
                  },
                  {
                    name: '已完成',
                    type: 'bar',
                    barMaxWidth: 35,
                    data: arrFinishedQty,
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          position: 'top',
                          fontSize: '12',
                          fontWeight: 'bold'
                        }
                      }
                    }
                  },
                  {
                    name: '预超期',
                    type: 'bar',
                    barMaxWidth: 35,
                    data: arrYuChaoQiQty,
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          position: 'top',
                          fontSize: '12',
                          fontWeight: 'bold'
                        }
                      }
                    }
                  },
                  {
                    name: '超期',
                    type: 'bar',
                    barMaxWidth: 35,
                    data: arrChaoQiQty,
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          position: 'top',
                          fontSize: '12',
                          fontWeight: 'bold'
                        }
                      }
                    }
                  }
                ]
              };
              chart.setOption(option);
            }
          });
        };
        GetZSThisMonthDealFaultBillCount();

        //本月各机型--返件情况（饼图）
        function GetThisMonthDealFaultProductFamilyInfo() {
          $.ajax({
            type: "POST",
            url: "../handler/board/ZSWorkcenterDealFaultBill.ashx?type=GetThisMonthDealFaultProductFamilyInfo",
            dataType: "text",
            data: {
              workcentername: Decrypt(layui.url().search.workcenter)
            },
            cashe: false,
            beforeSend: function () {
              echarts.dispose(document.getElementById("wanchengqingkuangGauge"));
              var wanchengqingkuangGauge = echarts.init(document.getElementById('wanchengqingkuangGauge'));
              wanchengqingkuangGauge.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });
            },
            success: function (data) {
              var obj = JSON.parse(data);

              if (obj.length < 1) {
                $("#wanchengqingkuangGauge").empty().append("<div class='content'>暂无数据</div>");
                return;
              };

              var pieData = [];
              var legendData = [];
              //var pieData = [{value:10,name:'XX50'},{value:10,name:'XX13'},{value:10,name:'XX12'},{value:13,name:'XX17'}];
              //var legendData = ['XX50','XX13','XX12','XX17'];

              for (var i = 0; i < obj.length; i++) {
                var _obj = { value: obj[i]["QTY"], name: obj[i]["ENGINEFAMILY"] };
                pieData.push(_obj);
                legendData.push(obj[i]["ENGINEFAMILY"]);
              };

              var arrProductFamily = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n'];

              echarts.dispose(document.getElementById("wanchengqingkuangGauge"));
              var chart = echarts.init(document.getElementById('wanchengqingkuangGauge'));
              chart.hideLoading();

              var option = {
                tooltip: {
                  trigger: 'item',
                  formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                grid: {
                  left: '1%',
                  right: '1%',
                  bottom: '3%',
                  containLabel: true
                },
                legend: {
                  orient: 'vertical',
                  x: 'left',
                  data: legendData,
                  textStyle: {
                    fontSize: '12',
                    fontWeight: 'bold',
                    color: '#fff'
                  }
                },
                color: ['#00ff00', '#ff6700', '#00BFFF', '#FFF'],
                series: [
                  {
                    name: '机型',
                    type: 'pie',
                    radius: ['30%', '45%'],
                    center: ['60%', '50%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: {
                      textStyle: {
                        fontSize: '12',
                        fontWeight: 'bold'
                      },
                      emphasis: {
                        show: true,
                        textStyle: {
                          fontSize: '12',
                          fontWeight: 'bold'
                        }
                      }
                    },
                    labelLine: {
                      smooth: false,
                      lineStyle: {
                        width: 2
                      }
                    },
                    data: pieData
                  }
                ]
              };
              chart.setOption(option);
            }
          });
        };
        GetThisMonthDealFaultProductFamilyInfo();

        //本月各单位完成情况--柱状图
        function GetZSThisMonthDealFaultBillFactoryCount() {
          $.ajax({
            type: "POST",
            url: "../handler/board/ZSWorkcenterDealFaultBill.ashx?type=GetZSThisMonthDealFaultBillFactoryCount",
            dataType: "text",
            cashe: false,
            data: {
              workcentername: Decrypt(layui.url().search.workcenter)
            },
            beforeSend: function () {
              echarts.dispose(document.getElementById("factoryFanJianWanBar"));
              var factoryFanJianWanBar = echarts.init(document.getElementById('factoryFanJianWanBar'));
              factoryFanJianWanBar.showLoading({
                text: '数据查询中...',
                effect: 'whirling',
                maskColor: 'transparent',
                textColor: '#ffffff'
              });
            },
            success: function (data) {
              var obj = JSON.parse(data);

              var arrTotal = [],
                arrFanChuQty = [],
                arrFinishedQty = [],
                arrYuChaoQiQty = [],
                arrChaoQiQty = [];

              var arrFactory = [];

              for (var i = 0; i < obj.length; i++) {
                arrTotal.push(obj[i]["total"]);
                arrFanChuQty.push(obj[i]["fanChuQty"]);
                arrFinishedQty.push(obj[i]["finishedQty"]);
                arrYuChaoQiQty.push(obj[i]["yuChaoQiQty"]);
                arrChaoQiQty.push(obj[i]["chaoQiQty"]);
                arrFactory.push(obj[i]["FACTORYNAME"]);
              };

              echarts.dispose(document.getElementById("factoryFanJianWanBar"));
              var chart = echarts.init(document.getElementById('factoryFanJianWanBar'));
              chart.hideLoading();

              var option = {
                tooltip: {
                  trigger: 'axis',
                  show: true,
                  axisPointer: {
                    type: 'none'
                  }
                },
                grid: {
                  left: '1%',
                  right: '1%',
                  bottom: '3%',
                  containLabel: true
                },
                legend: {
                  data: ['总数', '已转出', '已完成', '预超期', '超期'],
                  x: 'left',
                  y: 'top',
                  textStyle: {
                    fontSize: '12',
                    fontWeight: 'bold',
                    color: '#fff'
                  }
                },
                color: ['#00BFFF', '#FFF', '#00ff00', 'yellow', 'red'],
                xAxis: [
                  {
                    type: 'category',
                    data: arrFactory,
                    axisTick: {
                      alignWithLabel: true
                    },
                    axisLine: {
                      lineStyle: {
                        color: '#fff',
                        width: '2'
                      }
                    },
                    axisLabel: {
                      show: true,
                      textStyle: {
                        color: '#fff',
                        fontSize: '12',
                        fontWeight: 'bold'
                      }
                    }
                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                    axisLine: {
                      lineStyle: {
                        color: '#fff',
                        width: '2'
                      }
                    },
                    axisLabel: {
                      show: true,

                      textStyle: {
                        color: '#fff',
                        fontSize: '12',
                        fontWeight: 'bold'
                      }
                    },
                    splitLine: {
                      show: false,
                      lineStyle: {
                        color: '#999',
                        type: 'dashed'
                      }
                    }
                  }
                ],
                series: [
                  {
                    name: '总数',
                    type: 'bar',
                    barMaxWidth: 20,
                    data: arrTotal,
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          position: 'top',
                          fontSize: '14',
                          fontWeight: 'bold'
                        }
                      }
                    }
                  },
                  {
                    name: '已转出',
                    type: 'bar',
                    barMaxWidth: 20,
                    data: arrFanChuQty,
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          position: 'top',
                          fontSize: '14',
                          fontWeight: 'bold'
                        }
                      }
                    }
                  },
                  {
                    name: '已完成',
                    type: 'bar',
                    barMaxWidth: 20,
                    data: arrFinishedQty,
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          position: 'top',
                          fontSize: '14',
                          fontWeight: 'bold'
                        }
                      }
                    }
                  },
                  {
                    name: '预超期',
                    type: 'bar',
                    barMaxWidth: 20,
                    data: arrYuChaoQiQty,
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          position: 'top',
                          fontSize: '14',
                          fontWeight: 'bold'
                        }
                      }
                    }
                  },
                  {
                    name: '超期',
                    type: 'bar',
                    barMaxWidth: 20,
                    data: arrChaoQiQty,
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          position: 'top',
                          fontSize: '14',
                          fontWeight: 'bold'
                        }
                      }
                    }
                  }
                ]
              };
              chart.setOption(option);
            }
          });
        };
        GetZSThisMonthDealFaultBillFactoryCount();

        //返件信息明细
        function GetDealFaultBillDetail() {
          table.render({
            elem: '#test',
            url: "../handler/board/ZSWorkcenterDealFaultBill.ashx?type=GetDealFaultBillDetail",
            method: 'POST',
            where: {
              workcentername: Decrypt(layui.url().search.workcenter)
            },
            request: {
              pageName: 'page',
              limitName: 'rows'
            },
            cellMinWidth: 80,
            page: {
              theme: '#1E9FFF'
            },
            text: {
              none: '暂无相关数据'
            },
            cols: [[
              { type: 'numbers', title: '序号', width: 60 },
              { field: 'DEALFAULTBILLNAME', title: '返件编号', style: 'font-size:12px;' },
              { field: 'ENGINENO', title: '发动机号' },
              { field: 'PRODUCTNAME', title: '件号' },
              { field: 'PRODUCTBATCHNO', title: '批次' },
              { field: 'FACTORYNAME', title: '接收单位' },
              {
                field: 'STATUS', title: '排故进展', style: 'color:#fff;',
                templet: function (d) {
                  if (d.STATUS === "接收退回") {
                    return "<span style='background-color:red;padding:5px;border-radius:5px;'>" + d.STATUS + "</span>";
                  } else if (d.STATUS === "返回退回") {
                    return "<span style='background-color:red;padding:5px;border-radius:5px;'>" + d.STATUS + "</span>";
                  } else if (d.STATUS === "待返出") {
                    return "<span style='background-color:#9400d3;padding:5px;border-radius:5px;'>" + d.STATUS + "</span>";
                  } else if (d.STATUS === "待接收") {
                    return "<span style='background-color:#2F4056;padding:5px;color:#fff;border-radius:5px;'>" + d.STATUS + "</span>";
                  } else if (d.STATUS === "待完成") {
                    return "<span style='background-color:#00bfff;padding:5px;border-radius:5px;'>" + d.STATUS + "</span>";
                  } else if (d.STATUS === "待返回") {
                    return "<span style='background-color:#19e09f;padding:5px;border-radius:5px;'>" + d.STATUS + "</span>";
                  }
                }
              },
              {
                field: 'FROMTIME', title: '返出时间',
                templet: function (d) {
                  if (d.FROMTIME === null) {
                    return "";
                  } else {
                    return d.FROMTIME.split('T')[0];
                  }
                }
              },
              {
                field: 'REQUIREFINISHTIME', title: '要求完成时间',
                templet: function (d) {
                  if (d.REQUIREFINISHTIME === null) {
                    return "";
                  } else {
                    return d.REQUIREFINISHTIME.split('T')[0];
                  }
                }
              },
              {
                field: 'RECVFACTORYTIME', title: '接收时间',
                templet: function (d) {
                  if (d.RECVFACTORYTIME === null) {
                    return "";
                  } else {
                    return d.RECVFACTORYTIME.split('T')[0];
                  }
                }
              },
              {
                field: 'ESTIMATEDCOMPLETEDATE', title: '预计完成时间',
                templet: function (d) {
                  if (d.ESTIMATEDCOMPLETEDATE === null) {
                    return "";
                  } else {
                    return d.ESTIMATEDCOMPLETEDATE.split('T')[0];
                  }
                }
              },
              {
                field: 'FINISHTIME', title: '完成时间',
                templet: function (d) {
                  if (d.FINISHTIME === null) {
                    return "";
                  } else {
                    return d.FINISHTIME.split('T')[0];
                  }
                }
              },
              {
                field: 'DELAYDAYS', title: '超期天数',
                templet: function (d) {
                  if (d.DELAYDAYS < 0) {
                    return 0;
                  } else {
                    return d.DELAYDAYS;
                  }
                }
              },
              { field: 'FAULTDESC', title: '故障内容', }
            ]]
          });
        };
        GetDealFaultBillDetail();
      });
    });
  </script>
</body>

</html>